<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link type="text/css" rel="stylesheet" href="webjars/bootstrap/3.3.7/css/bootstrap.min.css"/>
</head>
<body>
    <div class="container">
        <div id="vuebox">
            <!--图书分类-->
            <div class="row">
                <div class="col-md-6">
                    <form class="form-inline" role="form" style="padding-left: 250px;">
                        <div class="form-group" style="padding-left: 20px;">
                            <label>图书分类:</label>
                            <select class="form-control" v-model="categoryid">
                                <option value="0">全部</option>
                                <option v-for="item in categorylist.data" :value="item.id">{{item.name}}</option>
                                </select>
                        </div>
                        <div class="form-group"  style="padding-left: 20px;">
                            <button type="button" class="btn btn-primary" @click="selbtn()">查询</button>
                        </div>

                    </form>
                </div>
                <div class="col-md-4 text-right">
                    <a href="javascript:void(0)" @click="openAdd()" class="btn btn-primary">新增电子图书</a>
                </div>
            </div>
            <!--图书列表-->
            <div class="row">
                <div class="col-md-12">
                    <br/>
                    <table class="table table-striped">
                        <thead>
                        <tr>
                            <th>图书编号</th>
                            <th>图书名称</th>
                            <th>图书摘要</th>
                            <th>上传人</th>
                            <th>上传时间</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="item in ebooklist.data.list">
                            <td>{{item.id}}</td>
                            <td>{{item.title}}</td>
                            <td>{{item.summary}}</td>
                            <td>{{item.uploaduser}}</td>
                            <td>{{item.createdate}}</td>
                            <td>
                                <button class="btn btn-success" @click="to_update_entry(item.id)">修改</button>
                                    <button class="btn btn-danger" @click="deleteEntry(item.id)">删除</button>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                    <br/>
                </div>
            </div>
            <!--上一页下一页-->
            <div class="row">
                <div class="col-md-12" align="center">
                    <ul class="pagination ">
                        <li v-show="ebooklist.data.hasPreviousPage"><a href="javascript:void(0)" @click="prev()">&laquo;</a></li>
                        <li :class="{active:ebooklist.data.pageNum==i}" v-for="i in ebooklist.data.navigatepageNums">
                            <a href="javascript:void(0)"  @click="inpage(i)">{{i}}</a>
                        </li>
                        <li v-show="ebooklist.data.hasNextPage"><a href="javascript:void(0)" @click="next()">&raquo;</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!-- 添加模态框-->
    <div class="modal fade" id="AddModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title" id="myModalLabel">添加</h4>
                </div>
                <div class="modal-body">
                    标题:<input type="text" class="form-control" v-model="ebook.title"/><br/>
                    上传人:<input type="text" class="form-control" v-model="uploaduser"/><br/>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal"  @click="add()">关闭</button>
                    <a href="#" class="btn btn-primary" @click.native="add()">提交更改</a>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div>
</body>
</html>
<script type="text/javascript" src="/webjars/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="/webjars/vue/2.6.10/dist/vue.js"></script>
<script type="text/javascript" src="/webjars/axios/0.19.0/dist/axios.min.js"></script>
<script type="text/javascript" src="/webjars/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">
    var vm=new Vue({
        el:"#vuebox",
        data:{
            pageNum:1,
            pageSize:1,
            pagelist:1,//页数
            categoryid:0,//分类编号
            categorylist:[],//分类集合
            ebooklist:[],
            ebook:{categoryid:0,title:"",summary:"",uploaduser:""}
        },mounted() {
            axios.post("/select/category").then(res => {this.categorylist = res.data});
            this.queryAll();
        },methods:{
            queryAll:function () {
                axios({url:"/select/Entry", method:"post", params:{categoryid:this.categoryid, pageNum:this.pageNum, pageSize:this.pageSize}}).then(res=>{this.ebooklist=res})
            },
            prev:function () {//上一页
                this.pageNum +=-1;
                this.queryAll();
            },
            next:function () {//下一页
                this.pageNum+=+1;
                this.queryAll();
            },
            inpage:function (i) {//页数跳转
                this.pageNum=i;
                this.queryAll();
                alert(this.ebook.title);
            }
            ,
            selbtn:function () {
                this.queryAll();
            },
            openAdd:function () {
                $("#AddModal").modal("show");
            },
            deleteEntry:function (id) {
                axios({
                    url:"/delEntryByid",
                    method:"post",
                    params:{id:id}
                    })
                    .then()
                this.queryAll();
            },
            add:function () {
                alert("aa");
            }
        },filters: {
            formatDate: function (value) {
                let date = new Date(value);
                let y = date.getFullYear();
                let MM = date.getMonth() + 1;
                MM = MM < 10 ? ('0' + MM) : MM;
                let d = date.getDate();
                d = d < 10 ? ('0' + d) : d;
                let h = date.getHours();
                h = h < 10 ? ('0' + h) : h;
                let m = date.getMinutes();
                m = m < 10 ? ('0' + m) : m;
                let s = date.getSeconds();
                s = s < 10 ? ('0' + s) : s;
                return y + '-' + MM + '-' + d /*+ ' ' + h + ':' + m + ':' + s*/;
            }

        }


    })
</script>